<template>
  <div class="searchGroup">
    <van-row class="search">
      <van-col :span="3">
        <img :src="locationPath" width="80%" class="search-icon" />
      </van-col>
      <van-col :span="16">
        <input type="text" placeholder="请输入" class="search-input" />
      </van-col>
      <van-col :span="4"><van-button size="mini" class="search-button">搜索</van-button></van-col>
    </van-row>

    <!-- 图片懒加载的轮播，这个轮播会有浮动，要使用父盒子的clear清除浮动。 -->
    <div class="swiper-area">
      <van-swipe autoplay="1000" :loop="true">
        <van-swipe-item v-for="(banner, index) of bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 商品类别栏 -->
    <div class="typeBar">
      <div @click="goCategoryPage(item.mallCategoryId)" class="typeBar-item" v-for="(item, index) of category" :key="index">
        <img v-lazy="item.image" width="80%" />
        <span>{{item.mallCategoryName}}</span>
      </div>
    </div>

    <!-- 广告图片 -->
    <div class="advertesPicture">
      <img v-lazy="advertesPicture" width="100%">
    </div>

    <!-- 商品推荐栏 -->
    <div class="recommend-area">
      <div class="recommend-title">商品推荐</div>
      <div class="recommend-body">
        <swiper :options="recommendSwiperOptions">
          <swiper-slide v-for="(item, index) of recommendGoods" :key="index">
            <div class="recommend-item">
              <img v-lazy="item.image" width="80%" />
              <div class="recommend-item-name">{{item.goodsName}}</div>
              <div>￥{{item.price | moneyFilter}} (￥{{item.mallPrice | moneyFilter}})</div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>

    <!-- 底部商品栏 -->
    <floorComponent class="floorItem" :floorData="floor1" :floorTitle="floorName.floor1"></floorComponent>
    <floorComponent class="floorItem" :floorData="floor2" :floorTitle="floorName.floor2" location="right"></floorComponent>
    <floorComponent class="floorItem" :floorData="floor3" :floorTitle="floorName.floor3"></floorComponent>

    <!-- 最底部--热卖商品栏 -->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
        <van-list>
          <van-row gutter="15">
            <van-col span="12" v-for="(item, index) of hotGoods" :key="index">
              <goodsInfo :goodsId="item.goodsId" :GoodsImage="item.image" :GoodsName="item.name" :GoodsPrice="item.price"></goodsInfo>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/axios/axios.js';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import toMoney from '@/filters/moneyFilter.js'

import floorComponent from '@/components/component/floorGoods/floorGoods'
import goodsInfo from '@/components/component/goodsInfo/goodsInfo'

export default {
  data() {
    return {
      locationPath: require('../../assets/img/location.png'),
      bannerPicArray:[],
      category: [],   // 商品类别
      advertesPicture: '',    // 广告图片
      recommendGoods: [],   // 商品推荐
      recommendSwiperOptions: {
        slidesPerView: 3,
        pagination:{
          el:'.swiper-pagination',
          type: 'progressbar',
        }
      },
      floor1: [],
      floor2: [],
      floor3: [],
      floorName: {},    // 底部所有商品栏的标题
      hotGoods: [],     // 最底部--热卖商品
    }
  },
  components: {
    swiper, swiperSlide,
    floorComponent,
    goodsInfo,
  },
  filters: {
    moneyFilter(money) {
      return toMoney(money);
    }
  },
  methods: {
    // 请求首页的数据
    getHomeData() {
      axios.ajax({
        methods: 'GET',
        url: this.$url.homeData,
      }).then(res => {
        let data = res.data;
        this.category = data.category;
        this.bannerPicArray = data.slides;
        this.advertesPicture = data.advertesPicture.PICTURE_ADDRESS
        this.recommendGoods = data.recommend;
        this.floor1 = data.floor1;
        this.floor2 = data.floor2;
        this.floor3 = data.floor3;
        this.floorName = data.floorName;
        this.hotGoods = data.hotGoods;
      })
    },

    // 点击商品分类栏时，跳转到商品分类页面
    goCategoryPage(mallCategoryId) {
      this.$router.push({name:'CategoryList', params:{mallCategoryId:mallCategoryId}})
    }
  },
  created() {
    this.getHomeData()
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/common.styl';

.searchGroup {
  background-color: $colorB;
}

// 搜索框
.search {
  height: 2.2rem;
  line-height: 2.2rem;
  background-color: $colorA;
  overflow: hidden;
  .search-icon {
    margin-top: .15rem;
  }
  .search-input {
    box-sizing: border-box;
    width: 100%;
    height: 1.1rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px #fff solid;
    background-color: $colorA;
    padding-left: .5rem;
    padding-bottom: .3rem;
    color: #fff;
    &::-webkit-input-placeholder {
      color: #fff;
    }
  }
  .search-button {
    margin-left: .45rem;
    background-color: $colorB;
  }
}

// 轮播图
.swiper-area {
  clear: both;
  width:20rem;
  max-height: 9.1875rem;
  overflow: hidden;
}

// 商品类别栏
.typeBar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: $font1;
  justify-content: space-around;
  padding: 0 .3rem;
  margin-bottom: .3rem;

  .typeBar-item {
    flex: 1;
    text-align: center;
    img { border-radius: .3rem; }
  }
}

// 商品推荐栏
.recommend-area {
  background-color: #fff;
  margin-top: .3rem;
 
  .recommend-title {
    border-bottom: 1px solid $colorB;
    font-size: $font1;
    padding: .2rem;
    color: $colorA;
    text-align: center;
  }
  .recommend-body{
    border-bottom: 1px solid $colorB;
    .recommend-item {
      width:99%;
      border-right: 1px solid $colorB;
      font-size: 12px;
      text-align: center;
      .recommend-item-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }
    /deep/ .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
      bottom: .28rem;
      top: auto;
      width: 5rem;
      left: 50%;
      transform: translateX(-50%);
    }
    /deep/ .swiper-container {
      padding-bottom: 0.9rem;
    }
  }
}

// 底部商品栏
.floorItem {
  margin-top: 1rem;
}

// 最底部--热卖商品栏
.hot-area {
  font-size: $font1;
  margin-top: 1.5rem;
  .hot-title {
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
  }
  .hot-goods {
    padding: 0 .8rem;
    margin-top: .5rem;
  }
}
</style>